<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>电商大数据管理平台</title>
    <link rel="icon" href="icon.ico">
    <link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css/dashboard.css" rel="stylesheet">
    <link href="plugins/element-ui/theme-default/index.css" rel="stylesheet" />
    <!--[if lt IE 9]>
			<script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                    <a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
                </div>
                <navbars :acv="bnav"></navbars>
            </div>
        </nav>

        <div class="container-fluid">
            <div class="row">
                <managenav :dsa="'电商企业'"></managenav>
                <div class="col-sm-9 col-sm-offset-3 col-md-offset-2 col-md-10 main">
                    <div class="row">
                        <div class="col-xs-12">
                            <h2 style="color: #0D81F5;"><b>电商企业</b></h2>
                        </div>
                    </div>

                    <div class="panel-filter" style="border: 1px solid #ddd;">
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <label for="platformAddress">地址：</label>
                                <select name="address" id="platformAddress" class="form-control" v-model="buySite.addressCode" @change="getSiteBuyData">
                                    <option v-for="item in dataOfAddressCode" :value="item.id">{{item.geoName}}</option>
                                </select>
                            </div>
                            &nbsp;
                            <!--<button type="button" class="btn btn-info" @click="onBuySiteSearchClick">查找</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
                            <div class="input-group">
                                <input type="text" class="form-control" v-model="buySite.storeName" placeholder="输入电商名称关键字搜索">
                                <span class="input-group-btn">
										<button class="btn btn-default" type="button" @click="onBuySiteSearchClick">搜索</button>
									</span>
                            </div>
                        </form>
                    </div>

                    <!--<table class="table table-bordered table-condensed table-hover table-striped display" width="100%" id="table-list"></table>-->
                    <el-table :data="buySite.searchData" stripe border style="width: 100%">
                        <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                        <el-table-column prop="platformCategoryParents" label="归属父平台"></el-table-column>
                        <el-table-column prop="platformCategory" label="归属平台"></el-table-column>
                        <el-table-column prop="storeCategory" label="类别" width="120" :filters="buySite.cateFilter" :filter-method="filterPlatform"></el-table-column>
                        <el-table-column prop="addressCode" label="地址码"></el-table-column>
                        <el-table-column prop="addressDetail" label="地址详情"></el-table-column>
                        <el-table-column prop="responsiblePerson" label="负责人"></el-table-column>
                        <el-table-column prop="mobileNo" label="联系方式"></el-table-column>
                        <el-table-column prop="employeeNum" label="员工数"></el-table-column>
                        <el-table-column prop="tradingVolume" label="交易额"></el-table-column>
                    </el-table>
                    <div class="text-center" style="margin: 10px 0;">
                        <el-pagination @current-change="handleCurrentChange" :current-page="buySite.currentPage" :page-size="buySite.pageSize" layout="total, prev, pager, next, jumper" :total="buySite.totalCount">
                        </el-pagination>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script src="plugins/jquery/jquery.min.js"></script>
    <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/nav.js"></script>
    <script src="plugins/element-ui/index.js"></script>
    <script src="js/common.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                bnav: {
                    number: 1,
                },
                dataOfAddressCode: [],
                buySite: {
                    currentPage: 1,
                    pageSize: 10,
                    totalCount: 89,
                    searchKey: '',
                    addressCode: "520600000000",
                    storeName: "",
                    tableData: [],
                    searchData: [],
                    cateFilter: [],
                    addressFilter: [],
                    optTypeFilter: []
                }
            },
            computed: {

            },
            mounted: function() {
                this.getSiteBuyData();
                this.getAddressCode();
                this.tab = GetQueryString("tab");
            },
            methods: {
                arrUnique: function(arr, key) {
                    var result = [],
                        hash = {};
                    for (var i = 0, elem;
                        (elem = arr[i]) != null; i++) {
                        var str = elem[key];
                        if (!hash[str]) {
                            hash[str] = true;
                            result.push({
                                text: str,
                                value: str
                            });
                        }
                    }
                    return result;
                },
                getSiteBuyData: function() {
                    var vm = this;
                    var vcode = vm.buySite.addressCode === "520600000000" ? "" : vm.buySite.addressCode;
                    $.ajax({
                        type: "get",
                        url: "/ebb/ebb/list/?start=" + vm.buySite.currentPage + "&size=" + vm.buySite.pageSize + "&type=4" + "&storeName=" + vm.buySite.storeName + "&addressCode=" + vcode,
                        async: true,
                        dataType: "json",
                        success: function(data) {
                            vm.buySite.tableData = data.data;
                            vm.buySite.searchData = data.data;
                            vm.buySite.totalCount = data.totalCount;
                            vm.buySite.cateFilter = vm.arrUnique(vm.buySite.tableData, 'storeCategory');
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            if (XMLHttpRequest.status == 401) {
                                //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                // redirect_login();

                                ShowTip("请先登录！", "success", 1000);
                                setTimeout(function() {
                                    window.location.href = "login.html"
                                }, 1000);
                            }
                        }
                    });
                },
                getAddressCode: function() {
                    var vm = this;
                    $.ajax({
                        type: "get",
                        url: "ebb/geo/?addressCode=520600000000",
                        dataType: "json",
                        async: false,
                        success: function(data) {
                            vm.dataOfAddressCode = data;
                            vm.dataOfAddressCode.unshift({
                                geoName: "铜仁市",
                                id: "520600000000",
                                burg: 0,
                                city: 6,
                                county: 0,
                                prov: 52,
                                regionLever: 2,
                                village: 0
                            });
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            if (XMLHttpRequest.status == 401) {
                                //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                // redirect_login();

                                ShowTip("请先登录！", "success", 1000);
                                setTimeout(function() {
                                    window.location.href = "login.html"
                                }, 1000);
                            }
                        }
                    });
                },
                filterPlatform: function(value, row) {
                    return row.storeCategory === value;
                },
                onBuySiteSearchClick: function() {
                    this.getSiteBuyData();
                },
                handleCurrentChange: function(val) {
                    this.buySite.currentPage = val;
                    this.getSiteBuyData();
                }
            }
        });
    </script>
</body>

</html>